
<div style="POSITION: relative" id="content">
<h3>easyui Form验证 </h3>
  <div id="article_content" class="article_content">
	<p>这个教程将向你展示如何验证一个form,easyui框架提供一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">validatebox 插件去验证一个form,在这个教程我们将创建一个联系我们的form和应用<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">validatebox
 插件</span></span><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">验证form,然后你可以改编这个form到你自己的需求.</span></span></p>
<p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344913372_2880.png" alt=""><br>
</span></span></p>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
创建 &nbsp; &nbsp;form</h4>
<div>让我们创建一个简单的联系我们的form和<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">name, email, subject and message字段.</span></div>
<div><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span><pre name="code" class="html">&lt;div style=&quot;padding:3px 2px;border-bottom:1px solid #ccc&quot;&gt;Form Validation&lt;/div&gt;  
&lt;form id=&quot;ff&quot; method=&quot;post&quot;&gt;  
    &lt;div&gt;  
        &lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;  
        &lt;input class=&quot;easyui-validatebox&quot; type=&quot;text&quot; name=&quot;name&quot; required=&quot;true&quot;&gt;&lt;/input&gt;  
    &lt;/div&gt;  
    &lt;div&gt;  
        &lt;label for=&quot;email&quot;&gt;Email:&lt;/label&gt;  
        &lt;input class=&quot;easyui-validatebox&quot; type=&quot;text&quot; name=&quot;email&quot; required=&quot;true&quot; validType=&quot;email&quot;&gt;&lt;/input&gt;  
    &lt;/div&gt;  
    &lt;div&gt;  
        &lt;label for=&quot;subject&quot;&gt;Subject:&lt;/label&gt;  
        &lt;input class=&quot;easyui-validatebox&quot; type=&quot;text&quot; name=&quot;subject&quot; required=&quot;true&quot;&gt;&lt;/input&gt;  
    &lt;/div&gt;  
    &lt;div&gt;  
        &lt;label for=&quot;message&quot;&gt;Message:&lt;/label&gt;  
        &lt;textarea name=&quot;message&quot; style=&quot;height:60px;&quot;&gt;&lt;/textarea&gt;  
    &lt;/div&gt;  
    &lt;div&gt;  
        &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;  
    &lt;/div&gt;  
&lt;/form&gt;  </pre>我们添加一个样式名为<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">easyui-validatebox
 到<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">input 标记,所以input标记将应用验证根据<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">validType 属性.</span></span></span></div>
<div>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
当form数据无效时阻止form提交</h4>
<div><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">当用户点击form的submit按钮,如果form是无效的我们应该阻止form提交.</span></div>
<div><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span><pre name="code" class="javascript">$('#ff').form({  
    url:'form3_proc.php',  
    onSubmit:function(){  
        return $(this).form('validate');  
    },  
    success:function(data){  
        $.messager.alert('Info', data, 'info');  
    }  
});  </pre>如果form是无效的,一个提示信息将显示.</div>
<div><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
下载 &nbsp;EasyUI 示例代码:</h4>
<div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px">
<a href="http://www.jeasyui.com/tutorial/form/downloads/easyui-form3-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-form-demo.zip</a></div>
<br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>